<!--
this.attdtos=this.$store.state.att;-->
<template>
  <div>
    <div>
      <van-nav-bar
          title="景区列表"
          left-text="返回"
          left-arrow
          @click-left="back()"
      />

    </div>

    <div>
      <div class="dv1" v-for="a in attdtos">
        <van-row>
          <van-col :span="10">
            <img class="img1" :src="a.imgurl">
          </van-col>
          <van-col :span="13">
            <h4 class="dv2">{{ a.name }} 跟团价：{{ a.price }}</h4>
            <div class="dv2">{{ a.label }}</div>
            <div class="dv2">所在城市：{{ a.city }}</div>
            <div class="dv2">
              <div>
                <van-button class="btn1" type="danger" @click="look(a.name)">查看详情</van-button>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
      <van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
    </div>
  </div>
</template>

<script>
export default {
  name: "AttDtoByCity",
  data(){
    return{
      attdtos:[]
    }
  },
  mounted() {
    this.attdtos=this.$store.state.att.data.data;
  },

  methods:{
    back(){
      this.$router.push("/index")
    },
  }
}
</script>

<style scoped>
.dv1{
  background-color: ghostwhite;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  box-shadow: 5px 5px 3px gainsboro;
  border-radius: 20px;
  margin-bottom: 10px;
}
.dv2{
  margin: 5px;
  font-size: 13px;
}
.btn1{
  width: 60%;
  height: 20%;
  margin-left: 10%;
  margin-top: 5%;
  border-radius: 20px;
  margin-bottom: 2px;
}
.img1{
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.aa{
  background-color: aliceblue;
  color: black;
}
</style>